Ext.ns('ru.proburo.oms.components');

/**
 * ru.proburo.oms.components.Viewport
 * @extends Ext.Viewport
 */
ru.proburo.oms.components.Viewport = Ext.extend(Ext.Viewport, {
    
    constructor: function(config)
	{
		config = config || {};
		
		var logoutAction = '';
		
		if(!Ext.isAir)
		{
			logoutAction = new Ext.Action({
				text:    'Выйти',
				tooltip: 'Выйти из ситемы',
				iconCls: 'silk-key',
				handler: function(){ window.location = '/logout'},
				scope:   this
			});
		}
		
		Ext.applyIf(config, {	
			layout: 'border',
			items:
			[
				{
					region: 	  'west',					
					split: 	  	  true,
					width: 		  300,
					minWidth: 	  150,
					
					collapsible:  true,
					collapseMode: 'mini',
					
					header: 	  false,
					border: 	  false,
					bodyStyle: 	  'border-top: 1px solid #99BBE8;',
					baseCls:	  'x-plain',
					
					layout: 'accordion',
					layoutConfig: {
						titleCollapse: true,
						animate: 	   true,
						sequence: 	   true,
						activeOnTop:   false
					}
				},
				{
					region: 'center',
					
					xtype:  'tabpanel',
					header: false,
					border: false
				}
				,
				{
					region: 'north',
					height: 26,
					
					header: false,
					border: false,
					baseCls:'x-plain',
					
					xtype: 'toolbar',
					bodyStyle: {
						'border-bottom': 'none'
					},
					items: [						
						'->',
						logoutAction
					]
				}/* Status bars
				,
				{
					region: 'south',
					height: 20,
					
					header: false,
					border: false,
					baseCls:'x-plain',
					
					html: '<div style="text-align: center;color: gray;">&lt;status bar&gt;</div>'
				}*/
			]
		});
		
		ru.proburo.oms.components.Viewport.superclass.constructor.call(this, config);
		
		var l = this.layout;
		
		this.center = l.center;
		this.west   = l.west;
		this.east   = l.east;
		this.north  = l.north;
		this.south  = l.south;
		
		//var tree = this._initHomeTree(l.west.panel)
		//this._initHomeTab(tree);
		
		/**
		 * При сворачивании текущего пункта аккордеона - разворачиваем соседний
		 */
		
		var accordeon = this.get(0);
		
		accordeon.items.each(function(item, index, length){
			item.on('collapse', this._onCollapse, this);
		}, this);
		
		accordeon.on({
			'add': 	  function(container, item, index){
				item.on('collapse', this._onCollapse, this);
			},
			'remove': function(container, item, index){
				item.un('collapse', this._onCollapse, this);
			},
			
			scope: this
		});
	},
	
	// public
	getCenterRegion: function()
	{
		return this.get(1);
	},
	
	// public
	getWestRegion: function()
	{
		return this.get(0);		
	},
	
	// private
	_initHomeTree: function(panel)
	{
        var tree = panel.add({
			title:   'Главная',
			iconCls: 'silk-house',
			html:    ''
		});
        
        panel.doLayout();
        
        return tree;
	},
	
	// private
	_initHomeTab: function(tree)
	{
		var tp = this.center.panel;
		
		var tab = tp.add({
			title: 	 'Главная',
			iconCls: 'silk-house',
			border:  true,
			html: 	 ''
		});
		tp.currentFTab = tab;
		
		var key = tp.items.getKey(tab);
		tp.setActiveTab(key);
		
        tree.on('expand', function(p){
            var key = tp.items.getKey(tab);
            tp.hideTabStripItem(tp.currentFTab);
            tp.setActiveTab(key);
            tp.unhideTabStripItem(tab);
            tp.currentFTab = tab;
        }, this);
	},
	
	// private
	_onCollapse: function(p)
	{
		var layout = p.ownerCt.getLayout();
		
		if(p === layout.activeItem)
		{
			sibling = p.nextSibling();
			
			if(null === sibling)
			{
				sibling = p.previousSibling();
			}
			
			if(null === sibling)
			{
				sibling = p;
			}
			
			layout.setActive(sibling, true);
		}
	}
});